import {useState} from "react";
import {Link} from "oh-router-react";
import {AccountService} from "@/apis/account.js";
import axios from "axios";

export const Login = (props) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    // const [loginType, setLoginType] = useState(true);
    // function toggleLoginType() {
    //     setLoginType(!loginType);
    // }
    function onSubmitHandel(ev) {
        ev.preventDefault();
        console.log({password, email});
        AccountService.login({email, password,}).then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        })
    }

    return <article className="account-main flex-between">
            <div className="account-logo">
                <img src="http://116.62.219.88:2048/assets/login-left-CNbEJ55E.png" alt="account-logo"/>
            </div>
            <form className="im-form" onSubmit={onSubmitHandel}>
                <h3 className="account-title">1024字节物联网平台</h3>
                <p className="im-form-item flex-between">
                    <label className="im-label" htmlFor="email"><i className="bi-envelope"></i> 邮箱</label>
                    <input className="im-input" type="text" value={email} onChange={ev => setEmail(ev.target.value)}
                           placeholder="请输入邮箱"/>
                </p>
                <p className="im-form-item flex-between">
                    <label className="im-label" htmlFor="email"><i className="bi-shield-lock"></i> 密码</label>
                    <input className="im-input" type="password" value={password}
                           onChange={ev => setPassword(ev.target.value)} placeholder="请输入密码"/>
                </p>
                <p className="im-form-link flex-between">
                    <button className="im-button-link" onClick={props.toggleLogin}>注册账号</button>
                    <button className="im-button-link"><Link to="/helper">忘记密码？</Link></button>
                </p>
                <p className="im-form-submit">
                    <button type="submit" className="im-button">
                        登录
                    </button>
                </p>
                <p className="im-version">Version: 0.0.1023</p>
            </form>
        </article>}